import React from 'react';
import { Router, Route, Link } from 'react-router';

class AuctionItem extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            liked:(props.item.uid?1:0)
        };
        this.likeProduct = this.likeProduct.bind(this);
    }
    likeProduct(){
        let that = this;

        $.ajax({
            type: "POST",
            url: CBH.apiRoot+"/?g=Api&m=User&a=is_bind_tel",
            data: {uid:CBH.UserInfo.id},
            dataType:'jsonp',
            success: function(res){
                if(res.status){
                    $.ajax({
                        type: "POST",
                        url: CBH.apiRoot+"/?g=Api&m=User&a=like",
                        data: {itemid:this.props.item.id,uid:CBH.UserInfo.id},
                        dataType:'jsonp',
                        success: function(data){
                            that.setState({liked:data.result});
                        }
                    });
                }else{
                    blackShadow();
                    $('.validate-tel').vhAlign().show();
                    $("html, body").animate({
                        scrollTop: 0
                    }, "600");
                }
            }.bind(this)
        })

        function blackShadow() {
            let ah = $(document).height();
            $('.black-shadow').height(ah).show();
        }
    }
    render(){
        let likestatus = this.state.liked?"已关注":"关注";
        return (
            <li className="media">
                <div className="media-left">
                    <Link to="/detail">
                      <img className="media-object car-thumb" src={this.props.item.thumb?CBH.imgUploadPath + '/data/upload/' + this.props.item.thumb:''} />
                    </Link>
                </div>
                <div className="media-body">
                    <p>{this.props.item.title}</p>
                    <p>起拍价<span> : {this.props.item.start_price}</span></p>
                    <p>{this.props.item.adwords?this.props.item.adwords.replace(/,/g,' / '):''}</p>
                    <div className="row">
                        <div className="col-xs-12" style={{paddingRight:0}}>
                            <Link className="car-info-link" to={`/detail/${this.props.item.id}`}>查看详情</Link>
                            <a className="car-info-link attention" data-id={this.props.item.id} ref={'p'+this.props.item.id} href="javascript:;" onClick={this.likeProduct}>&nbsp;&nbsp;{ likestatus }&nbsp;&nbsp;</a>
                        </div>
                    </div>
                </div>
            </li>
        );
    }
}

class AuctionCarList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            status: 0,
            data: []
        };
    }

    componentDidMount(){
        $.get(CBH.apiRoot+"/?g=Api&m=CommonProduct&a=mproducts&uid="+CBH.UserInfo.id, function(result) {
            this.setState(result);

        }.bind(this),'jsonp');
    }
    render() {

        let items = this.state.data.map((car,i)=>
              <AuctionItem item={car} key={i} />
            )
        return (
          <div>
            <p className="section-block-title">
            好车时时拍
            </p>
            <section className="section-block car-list">
              <div className="row">
                <div className="col-xs-12">
                  <ul className="media-list car-list-info">
                    {items}
                    <Link className="block-link more-link" to="/list">点击查看更多</Link>
                  </ul>
                </div>
              </div>
            </section>
          </div>
        );
    }
}

export default AuctionCarList;
